<template>
	<view>
		<!-- 根据单据筛选 -->
		<view class="change-list-box">
			<view class="item" v-for="(item,index) in list" @click="changeList(item)"
				:key="index" :class="listIndex == item.id ? 'active' : ''">{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listIndex : 2,
				list : [
					{
						title:"选客户（第1步）",
						id : 2,
					},
					{
						title:"选产品（第2步）",
						id : 1,
					},
				],
				
			};
		},
		methods: {
			/*** 根据单据类型筛选 ***/
			changeList(item)
			{
				if(this.listIndex == item.id) return;
				this.listIndex = item.id;
				this.$emit("changeList",item.id);
			},
			
			updateIndx(value)
			{
				this.listIndex = value;
			}
		}
		
	}
</script>

<style lang="scss">
.change-list-box
{
	height: 40px;
	padding: 0px 10px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	// border-bottom: 1px solid #ECECEC;
	.item
	{
		font-size: 14px;
		position: relative;
		cursor: pointer;
		.new-bills{
			position: absolute;
			top: 0px;
			right: -15px;
			display: block;
			width: 16px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: rgba(253,0,23,.8);
			color: #FFF;
			font-size: 3px !important;
		}
	}
	
	.item:hover
	{
		&.active
		{
			color: #157BFC;
			border-bottom: 2px #157BFC solid ;
		}
		color: rgba(21,123,252,.6);
	}
	.active
	{
		color: #157BFC;
		border-bottom: 2px #157BFC solid ;
	}
}
</style>
